<template>
  <div class="community-policing">
    <div class="community-policing-item" v-for="item in list">
      <div class="progress">
        <div class="title">{{item.title}}</div>
        <el-progress color="#11B3FA" :stroke-width="12" text-color="#fff" define-back-color="#0B2F51" :percentage="item.value" :show-text="false"></el-progress>
      </div>
      <div class="text">{{item.name}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TeamBuilding',
  data(){
    return{
      list:[
        {name:'覆盖率100%',value:100,title:'网格长 25人'},
        {name:'24小时在岗',value:95,title:'网格警长 8人'},
        {name:'调解成功率98%',value:98,title:'驻社区司法干警 3人'}
      ]
    }
  },
}
</script>
<style scoped lang="scss">
.community-policing{
  width: 100%;
  height: 100%;
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0,198,255,.3);
  }
  &::-webkit-scrollbar-track{
    border-radius: 3px;
    background: rgba(0,24,48,.3);
  }
  .community-policing-item{
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 18px;
    .text{
      width: 120px;
      color: #fff;
      font-size: 15px;
    }
    .progress{
      width: calc(100% - 160px);
      margin-left: 10px;
      .title{
        color: white;
        font-family: 冷酷体;
        margin-bottom: 6px;
        font-size: 17px;
      }
    }
    &:last-child{
      margin-bottom: 0;
    }
  }
}
</style>
